<template>
 <div class="goodsdetail">
     <!-- <HeaderTop title="商品详情"></HeaderTop> -->
     <div class="detail-wrapper">
         <div class="detail">
             <!-- <img :src="goodsInfo.coverImg" alt=""> -->
             <div class="swiper-container">
                 <div class="swiper-wrapper">
                     <div class="swiper-slide" v-for="(img,index) in goodsHeadImgs" :key="index">
                        <img :src="img" alt="">
                    </div>
                 </div>
                 <div class="swiper-pagination"></div>
             </div>
             <p class="price">￥<span>{{goodsInfo.price}}</span></p>
             <h1 class="title">{{goodsInfo.goodsName}}</h1>
             <h1 class="profile">{{goodsInfo.profile}}</h1>
             <div class="sales">
                <span class="salenum">总销量：<span>{{goodsInfo.saleVolume}}</span></span>
                <span class="freight">运费：<span>{{goodsInfo.espressFee}}</span></span>
             </div>
         </div>
         <div class="cell specification">
            <h3 class="cell-title">规格</h3>
            <van-cell title="选择规格" is-link @click="showSpeci=true"/>
            <van-popup v-model="showSpeci" position="bottom" class="speci-wrapper">
                <div class="speci-title">
                    <div class="collect_ul">
                        <div class="collect_item">
                            <img :src="goodsInfo.cartImg" alt="">
                            <div class="title">
                                <h3 class="name">{{goodsInfo.goodsName}}</h3>
                                <p class="size">库存<span>{{goodsInfo.stock}}</span>件</p>
                                <p class="price">￥{{goodsInfo.price}}</p>
                            </div>
                            <van-icon name="close" size="52px" color="#8E8E8E" @click="showSpeci=false"/>
                        </div>
                    </div>
                </div>
                <!-- 规格 -->
                <div class="speci-size">
                    <h4 class="speci-title">规格</h4>
                    <div class="speci-main">
                        <button class="size">{{goodsInfo.weights}}</button>
                    </div>
                </div>
                <!-- 购买数量 -->
                <div class="speci-num">
                    <h4 class="buy-num">购买数量</h4>
                    <van-stepper v-model="buyNum" integer :min="1" :max="118" :step="1"/>
                </div>
                <!-- 加入购物车 -->
                <div class="speci-addcart">
                    <button class="add-btn" @click="addToCart(false)">加入购物车</button>
                </div>
            </van-popup>
        </div>
         <div class="cell parameter">
            <h3 class="cell-title">参数</h3>
            <van-cell title="查看参数" is-link  @click="showParam=true"/>
            <van-popup v-model="showParam" position="bottom" class="param-wrapper">
                <h4 class="param-title">产品参数</h4>
                <div class="param-main">
                    <div class="param-item">
                        <p class="left">包装方式</p>
                        <p class="right">{{goodsInfo.packing}}</p>
                    </div>
                    <div class="param-item">
                        <p class="left">茶种类</p>
                        <p class="right">{{goodsInfo.teaType}}</p>
                    </div>
                    <div class="param-item">
                        <p class="left">产地</p>
                        <p class="right">{{goodsInfo.productionPlace}}</p>
                    </div>
                    <div class="param-item">
                        <p class="left">是否含糖</p>
                        <p class="right">{{goodsInfo.isSugary}}</p>
                    </div>
                    <div class="param-item">
                        <p class="left">系列</p>
                        <p class="right">{{goodsInfo.series}}</p>
                    </div>
                    <div class="param-item">
                        <p class="left">净含量</p>
                        <p class="right">{{goodsInfo.weights}}</p>
                    </div>
                </div>
                <div class="param-btn">
                    <button @click="showParam=false">确认</button>
                </div>
            </van-popup>
         </div>
         <div class="evaluate">
             <div style="margin-left:30px;padding:30px" v-if="!orderitemRemarkS.length">暂无评价</div>
             <div v-else>
                 <div class="evaluate_num">
                    <p>宝贝评价(<span>{{remarkNum}}</span>)</p>
                    <van-cell title="查看全部" is-link @click="getEval"/>
                    <van-popup v-model="showEval" position="bottom" class="eval-wrapper" @click-overlay="overlay">
                     <!-- <mt-loadmore  v-if='evalList' :top-method="loadTop" :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" :bottom-drop-text="bottomText"  ref="loadmore"> -->
                        <ul class="eval-ul">
                            <li class="eval-li" v-for="(item,index) in evalList" :key="index">
                                <div class="eval-avatar" style="margin-left:30px"><img style="width:60px;height:60px;border-radius:50%;margin-right:10px;vertical-align:middle" :src="item.picUrl" alt=""><span style="font-size:24px;color:#767676" v-if="item.nickName">{{item.nickName}}</span></div>
                                <p class="eval-main" v-if="item.buyerRemark">{{item.buyerRemark}}</p>
                                <div class="eval-img" style="margin:30px">
                                    <img v-if="item.picUrl" :src="item.picUrl1" alt="">
                                    <img v-if="item.picUrl1" :src="item.picUrl2" alt="">
                                    <img v-if="item.picUrl2" :src="item.picUrl3" alt="">
                                </div>
                            </li>
                            <div style="text-align:center" @click="loadBottom" v-if="!allLoaded">点击加载更多</div>
                            <p v-if="allLoaded" class='allloaded'>已加载全部</p>
                        </ul>
                        <!-- </mt-loadmore> -->
                    </van-popup>
                </div>
                <div class="evaluate_item">
                    <div class="avatar"><img src="./img/avatar.jpg" alt=""><span v-if="orderitemRemarkS[0]&&orderitemRemarkS[0].nickName">{{orderitemRemarkS[0].nickName}}</span></div>
                    <p class="ellipsis" v-if="orderitemRemarkS[0]&&orderitemRemarkS[0].buyerRemark">{{orderitemRemarkS[0].buyerRemark}}</p>
                </div>
             </div>
         </div>
         <div class="image">
            <img :src="img.detailImg" alt="" v-for="(img,index) in goodsDetails" :key="index">
         </div>
     </div>
    <van-goods-action class="bottom">
        <van-goods-action-mini-btn icon="shop" text="首页" @click.stop="$router.replace({path: '/msite'})" />
        <van-goods-action-mini-btn icon="star-o" v-if="!isCollection" text="收藏" @click.stop="onClickCollect" />
        <van-goods-action-mini-btn icon="star" v-if="isCollection" icon-class="icon1" text="收藏" @click.stop="onClickCollect" />
        <van-goods-action-mini-btn icon="cart-o" text="购物车" @click.stop="$router.push({path: '/shopcart'})"/>
        <van-goods-action-big-btn text="加入购物车" @click.stop="showSpeci = true" />
        <van-goods-action-big-btn text="立即购买" @click.stop="addToCart(true)" primary />
    </van-goods-action>
 </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import { Loadmore,MessageBox  } from 'mint-ui'
export default {
    data(){
        return {
            showParam:false,
            showSpeci:false,
            showEval:false,
            buyNum:1,
            goodsInfo:{},
            goodsHeadImgs:[], //商品轮播图
            goodsDetails:[], //商品详情图片
            orderitemRemarkS:[], //商品评价
            evalList:[], //商品评价列表
            num:1,
            size:10,
            allLoaded:false,
            autofill:false,
            bottomText:"上拉加载更多",
            loadMoreConfig:{
                bottomDistance:100,
            },
            remarkNum:'',
            goodsId:null,
            allLoaded:false,
            isCollection:false
        }
    },
    watch:{
        goodsHeadImgs(value){
            console.log('轮播图')
            this.$nextTick(()=>{
                new Swiper('.swiper-container',{
                    loop:true, //循环轮播
                    pagination:{
                        el:'.swiper-pagination'
                    }
                })
            })
        }
     },
     components:{
        //  HeaderTop,
         'mt-loadmore':Loadmore,
         MessageBox
     },
    // components:{
    //     HeaderTop
    // },
    async created(){
        var newId = this.$route.query.id
        console.log('newId',newId)
        // 根据goodsId异步获取商品详情
        const userId = localStorage.getItem('userId')
        if(localStorage.getItem('token')){
            const token = localStorage.getItem('token')
            console.log('userId',userId)
            // console.log('token',token)
            let result = await this.API.reqGoodsDetail({goodsId:newId,userId})
            console.log(1111)
            console.log(result)
            console.log('111',result.retData)
            this.goodsInfo = result.retData.goodsInfo
            this.goodsHeadImgs = result.retData.goodsHeadImgs
            this.goodsDetails = result.retData.goodsDetails
            this.orderitemRemarkS = result.retData.orderitemRemarkS
            this.remarkNum = result.retData.remarkNum
            this.isCollection = result.retData.isCollection
            console.log('收藏',this.isCollection)
        }else{
            const token = localStorage.getItem('token')
            console.log('userId',userId)
            console.log('token',token)
            let result = await this.API.reqGoodsDetail1({goodsId:newId})
            console.log(1111)
            console.log(result)
            console.log('111',result.retData)
            this.goodsInfo = result.retData.goodsInfo
            this.goodsHeadImgs = result.retData.goodsHeadImgs
            this.goodsDetails = result.retData.goodsDetails
            this.orderitemRemarkS = result.retData.orderitemRemarkS
            this.remarkNum = result.retData.remarkNum
            this.isCollection = result.retData.isCollection
            console.log('收藏',this.isCollection)
        }
    },
    methods: {
        // zml - 添加购物车 & 立即购买
        async addToCart(flag){
            if(localStorage.getItem('token')){
                // ldq 解决bug
                console.log('flag', flag)
                const params = {
                    userId: localStorage.getItem('userId'),
                    token: localStorage.getItem('token'),
                    goodsId: this.$route.query.id,
                    num: this.buyNum
                }
                const result = await this.API.reqAddTbCart(params)
                console.log('添加购物车', result)
                if (result.retCode === '001' || !result.retData) {
                    this.$toast('添加购物车失败')
                    return
                }
                if (result.retCode === '000' && !flag) {
                    this.$toast('添加成功')
                    this.showSpeci=false
                }
                if (flag) {
                    this.$store.state.shopIdArray = [result.retData]
                    console.log('vuex第一次存',this.$store.state.shopIdArray)
                    this.$router.push({
                        path: '/confirmorder',
                        // zml - 立即购买递交参数
                        params: {
                            isDel: true
                        }
                    })
                }
            }else{
                MessageBox({
                    title:'温馨提示',
                    message:'您还没有登录,先去登录吧~',
                    showCancelButton:true,
                    confirmButtonText:'登录',
                    cancelButtonText:'取消'
                }).then(action => {
                    if(action == 'confirm'){
                        console.log(action)
                        this.$router.push('/login')
                    }else{
                        console.log(action)
                    }
                })
            }
        },
        // 收藏
        async onClickCollect() {
            if(localStorage.getItem('token')){
                console.log('点击收藏');
                const userId = localStorage.getItem('userId')
                const token = localStorage.getItem('token')
                const goodsId = this.$route.query.id
                if(this.isCollection){
                    // 取消
                    const result = await this.API.reqCancelCollect({userId,token,goodsId,code:2})
                    console.log(result)
                    if(result.retCode === '000'){
                        this.$toast('取消收藏成功')
                        this.isCollection = false
                    }
                }else{
                    const result = await this.API.reqCancelCollect({userId,token,goodsId,code:1})
                    console.log(result)
                    if(result.retCode === '000'){
                        this.$toast('收藏成功')
                        this.isCollection = true
                    }
                    if(result.retCode !== '000'){
                        this.$toast(result.retMsg)
                    }
                }
            }else{
                MessageBox({
                    title:'温馨提示',
                    message:'您还没有登录,先去登录吧~',
                    showCancelButton:true,
                    confirmButtonText:'登录',
                    cancelButtonText:'取消'
                }).then(action => {
                    if(action == 'confirm'){
                        console.log(action)
                        localStorage.setItem('token', '')
                        localStorage.setItem('userId', '')
                        localStorage.setItem('userInfo','')
                        this.$store.dispatch('logout',{userId:this.userId,token:this.token})
                        this.$router.replace('/login')
                    }else{
                        console.log(action)
                    }
                })
            }
        },
        // 立即购买
        onClickBay() {
            console.log('点击立即购买');
            this.$router.push('/confirmorder')
        },
        overlay(){
            console.log('22222')
            this.num = 1
            this.allLoaded = false
        },
        async getEval(){
            this.showEval=true
            this.goodsId = this.$route.query.id
            const result = await this.API.reqGoodsEval({goodsId:this.goodsId,num:this.num,size:this.size})
            console.log('评价列表',result)
            if(result.retCode === '000'){
                this.evalList = result.retData
            }
        },
        //获取更多数据
        async getListDataPull(){
            if(this.allLoaded == true){
                return
            }
            console.log('num',this.num)
            let goodsId = this.$route.query.id
            let result = await this.API.reqGoodsEval({goodsId,num:this.num,size:this.size})
            console.log(result)
            if(result.retData==''||result.retData==[]||result.retData==null){
                this.isHaveMore(false) //禁止上拉
            }else{
                this.evalList = this.evalList.concat(result.retData?result.retData:[]);
                this.isHaveMore(true)
            }
        },
        //下拉刷新
       loadTop(){
         let self = this;
         this.num = 1;
         this.allLoaded = false;
         setTimeout(function(){
           self.getEval();
           self.$refs.loadmore.onTopLoaded();
        },1000)
       },
       // 上拉加载
        loadBottom(){
            let self = this;
            self.num ++;
            console.log('loadmore',this.num)
            setTimeout(function(){
                // if(this.evalList){
                //   self.$refs.loadmore.onBottomLoaded();
                // }
                self.getListDataPull();
            },1000)
        },
        isHaveMore(isHaveMore){
            this.allLoaded = true; //true是禁止上拉加载
            if(isHaveMore){
              this.allLoaded = false;
            }
        },
    }
 }
</script>
<style lang="stylus">
.bottom
    .van-goods-action-mini-btn .icon1
        color #145B3E
    .van-button--warning
        color #1E1E1E
        background-color #fff;
        border 1px solid #EEEEEE;
    .van-button--danger 
        color: #fff;
        background-color: #145B3E;
        border: 1px solid #145B3E;
</style>

<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixins.styl"
.goodsdetail
    // margin-top 45px
    .detail-wrapper
        .detail
            background #fff
            .swiper-container
                width 100%
                height 250px
                overflow hidden
                .swiper-wrapper
                    .swiper-slide
                        img
                            width 100%
            .price
                background #145B3E
                width 95px
                font-size 18px
                font-weight bold
                color #fff
                padding 10px 15px
                text-align center
                margin 15px 0
                border-radius 0 5px 5px 0
            .title
                font-weight bold
                font-size 18px
                margin 0 0 15px 10px
                margin-bottom 15px
            .profile
                margin 0 0 15px 10px
                margin-bottom 15px
            .sales
                font-size 10px
                color #4F4F4F
                overflow hidden
                margin 0 10px
                padding-bottom 10px
                .freight
                    float right
        .cell
            background #fff
            display flex
            justify-content space-between
            margin 10px 0
            .cell-title
                width 40px
                text-align center
                margin-left 10px
                margin-top 14px
                color #8A8A8A
            .speci-wrapper
                .speci-title
                    .collect_ul
                        .collect_item
                            display flex
                            justify-content space-between
                            padding 20px 10px
                            img
                                width 105px
                                height 105px
                                border-radius 5px
                            .title
                                width 190px
                                display flex
                                flex-direction column
                                justify-content space-between
                                font-size 14px
                                .name
                                    font-size 18px
                                    line-height 24px
                                    font-weight 500
                                .size
                                    font-size 13px
                                    color #838383
                                .price
                                    color red
                                    font-size 16px
                .speci-size
                    margin-left 20px
                    .speci-title
                        font-size 16px
                        height 30px
                        line-height 30px
                    .speci-main
                        .size
                            outline none
                            border 1px solid #EEEEEE
                            background #145B3E
                            width 90px
                            height 28px
                            font-size 14px
                            border-radius 30px
                            margin-top 5px
                            color #fff
                .speci-num
                    margin-left 20px
                    margin-top 30px
                    .buy-num
                        font-size 16px
                        height 40px
                        line-height 40px
                .speci-addcart
                    .add-btn
                        width 100%
                        height 49px
                        outline none
                        border none
                        background #145B3E
                        color #fff
                        font-size 17.6px
                        margin-top 15px
            .param-wrapper 
                height 438px
                width 100%
                border-top-left-radius 15px
                border-top-right-radius 15px
                .param-title
                    font-size 16px
                    font-weight bold
                    text-align center
                    margin 25px 0
                .param-main
                    .param-item
                        display flex
                        height 45px
                        line-height 45px
                        bottom-border-1px(#E5E5E5)
                        font-size 14px
                        padding 0 10px
                        margin 0 10px
                        .left
                            width 120px
                            font-weight bold
                        .right
                            color #646464
                .param-btn
                    display flex
                    justify-content center
                    button
                        outline none 
                        border none 
                        height 50px
                        width 355px
                        background #145B3E
                        font-size 16px
                        color #fff
                        border-radius 50px
                        margin-top 20px
                    
        .evaluate
            background #fff
            margin-bottom: 20px
            .evaluate_num
                display flex
                justify-content space-between
                p
                    width 120px
                    font-size 14px
                    font-weight bold
                    text-align center
                    margin-left 10px
                    // margin-right 180px
                    margin-top 14px
                .van-cell__title
                    margin-left 65%
                    color #767676
                    font-size 12px
                .eval-wrapper
                    height 438px
                    width 100%
                    padding 15px
                    border-top-left-radius 15px
                    border-top-right-radius 15px
                    .eval-ul
                        .eval-li
                            margin-bottom 15px
                            bottom-border-1px(#e4e4e4)
                            .eval-main 
                                color #0E0E0E
                                font-size 12px
                                width 100%
                                text-align left
                                text-indent 24px
                                padding 0
                                margin 0
                                margin 10px 0
                            .eval-img
                                margin-left 10px
                                img
                                    width 50px
                                    height 50px
                                    margin-right 20px
            
                    .allloaded
                            width 100% !important
                            text-align center    
            .evaluate_item
                .avatar
                    display flex
                    img
                        margin-left 10px
                        width 25px
                        height 25px
                        border-radius 20px
                    span 
                        font-size 12px
                        color #767676
                        height 25px
                        line-height 25px
                        margin-left 5px
                p
                    color #0E0E0E
                    font-size 12px
                    padding 10px
        .image
            padding-bottom 70px
            margin-top 10px
            padding-left 20px
            padding-right 20px
            padding-top 10px
            background #fff
            img
                width 100%
                // height 335px
</style>
